import App from '../App'
// 引入 react 中 lazy（懒加载）函数
import React, { lazy } from 'react'
import { Navigate } from 'react-router-dom'
import Home from '../views/Home'
import Login from '@/views/login'

// 通过 lazy 方法按需导入组件
// 懒加载模式，外层需要套一层 loading 的提示加载组件
const Page = lazy(() => import('../views/Page'))
const About = lazy(() => import('../views/About'))
const Comp1 = lazy(() => import('../views/Comp1'))
const Comp2 = lazy(() => import('../views/Comp2'))
const Hooks = lazy(()=>import('../views/hooks/UseEffect.tsx'))
const Drag = lazy(()=>import('../views/drag/ContentBox'))
const CusTomHooks = lazy(()=>import('../views/hooks/CusTom'))
const Translate = lazy(()=>import('../views/translate/Translate.tsx'))
const Lazyload = lazy(()=>import('../views/lazyload/Lazyload.tsx'))
const CommentContent = lazy(()=>import('../views/comment/CommentContent.tsx'))
const ToolkitStore = lazy(()=>import('../views/toolkit/ToolkitStore.tsx'))
const RtkQuery = lazy(()=>import('@/views/toolkit/RtkQuery.tsx'))
const MemoCallBack = lazy(()=>import('@/views/use/MemoCallBack.tsx'))
const ReactMemo = lazy(()=>import('@/views/use/ReactMemo.tsx'))
const Worker = lazy(()=>import('@/views/webWroker/Worker.tsx'))
const Row = lazy(()=>import('@/views/react-window/Row.tsx'))
const ReactWindow = lazy(()=>import('@/views/react-window/ReactWindow.tsx'))
const Anchor = lazy(()=>import('@/views/achors/Anchor.tsx'))
const SocketDemo = lazy(()=>import('@/views/websokcet/SocketDemo.tsx'))
const RtkIndex = lazy(()=>import('@/views/achors/Index.tsx'))
const Article = lazy(() => import('@/views/admin/Article.tsx'))


// 高阶组件
const withLoadingComp = (comp: JSX.Element) => (
  // 只要是 lazy 懒加载模式，就必须加上 React.Suspense 组件
  // fallback 组件加载前展示的内容
  <React.Suspense fallback={<h1>加载中....</h1>}>{comp}</React.Suspense>
)

const getRoutes = (
  path: React.Key,
  element: React.ReactNode,
  children?: object[],
): object => ({ path, element, children })

const routes = [
  getRoutes('/', <Navigate to="about" />),
  getRoutes('*', <Navigate to="about" />),
  getRoutes('/', <Home />, [
    getRoutes('about', withLoadingComp(<About />)),
    getRoutes('page', withLoadingComp(<Page />)),
    getRoutes('hooks', withLoadingComp(<Hooks />)),
    getRoutes('drag', withLoadingComp(<Drag />)),
    getRoutes('custom', withLoadingComp(<CusTomHooks />)),
    getRoutes('youdao', withLoadingComp(<Translate />)),
    getRoutes('lazy', withLoadingComp(<Lazyload />)),
    getRoutes('comment', withLoadingComp(<CommentContent />)),
    getRoutes('toolkit', withLoadingComp(<ToolkitStore />)),
    getRoutes('rtkq', withLoadingComp(<RtkQuery />)),
    getRoutes('memo', withLoadingComp(<MemoCallBack />)),
    getRoutes('reactMemo', withLoadingComp(<ReactMemo />)),
    getRoutes('worker', withLoadingComp(<Worker />)),
    getRoutes('row', withLoadingComp(<Row />)),
    getRoutes('variabl', withLoadingComp(<ReactWindow />)),
    getRoutes('anchor', withLoadingComp(<Anchor />)),
    getRoutes('scoket', withLoadingComp(<SocketDemo />)),
    getRoutes('rtkIndex', withLoadingComp(<RtkIndex />)),
    getRoutes('article', withLoadingComp(<Article />)),
  ]),
  getRoutes('sub', <Home />, [
    getRoutes('com1', withLoadingComp(<Comp1 />)),
    getRoutes('com2', withLoadingComp(<Comp2 />)),
  ]),
  getRoutes('login', <Login />),
]
// console.log('routes',routes);

export default routes
